<template>
	<view :style="{'height':heightStyle}">
		<view class="wanl-product">
			<!-- 普通布局 -->
			<view class="product_warter " :class="localDataStyle" v-if="localDataStyle == 'col-2-101'">
				<view class="wanl-waterfall">
					<view id="wanl-left-cloumn" class="wanl-cloumn forBox">
						<view class="warter" v-for="(item, index) in dataList" :key="index" @tap="handleGoods(item.id)">
							<view class="img-wrap">
								<image style="width: 100%;height: 100%;" :src="$wanlshop.oss(item.image, 125, 125)"
									mode="aspectFill"></image>
							</view>
							<view class="content padding-bj ">
								<view class="overflow_2 flex_ac">
									<image v-if="item.self_suport == 1"
										style="width: 60rpx;height: 30rpx;margin:0rpx 12rpx 0 0;"
										src="https://img.aibbyp.com/wechatUser/allOthers/shopQJ.png" mode=""></image>
									<block class="" v-else>
										<image v-if="item.isself == 1"
											style="width: 60rpx;height: 30rpx;margin:0rpx 12rpx 0 0;"
											src="https://img.aibbyp.com/wechatUser/allOthers/shopZY.png" mode="">
										</image>
									</block>
									<text class="flex1 overflow_1">{{ item.title }}</text>
								</view>
								<view class="flex align-center justify-between">
									<view class="text-red text-bold text-lg">
										<text class="text-price wanl-orange">{{ item.price }}</text>
									</view>
									<view class="text-sm wanl-gray" v-if="dataType === 'groups'">
										<text>已拼团 {{$wanlshop.toFormat(item.groups_num, 'hundred')}} 件</text>
									</view>
									<view class="text-sm wanl-gray" v-else>
										<text v-show="false">{{$wanlshop.toFormat(item.comment, 'hundred')}} 评价</text>
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>

			<view class="product_list" :class="localDataStyle" v-else>
				<view class="item" v-for="(item, index) in dataList" :key="index" @tap="handleGoods(item.id)">
					<view class="img-wrap ">
						<image style="width: 100%;height: 100%;" :src="$wanlshop.oss(item.image, 125, 125)"
							mode="aspectFill"></image>
					</view>
					<view class="content padding-sm mt16  overflow_1"
						:class="[{'content1':localDataStyle == 'col-2-20' || localDataStyle == 'col-2-10'},{'content2':shopnameType && localDataStyle != 'col-1-10'}]">
						<view class="" style="width: 100%;">
							<view class="overflow_1 flex_ac">
								<image v-if="item.self_suport == 1"
									style="width: 60rpx;height: 30rpx;margin:0rpx 12rpx 0 0;"
									src="https://img.aibbyp.com/wechatUser/allOthers/shopQJ.png" mode=""></image>
								<block class="" v-else>
									<image v-if="item.isself == 1"
										style="width: 60rpx;height: 30rpx;margin:0rpx 12rpx 0 0;"
										src="https://img.aibbyp.com/wechatUser/allOthers/shopZY.png" mode=""></image>
								</block>
								<text class="flex1 overflow_1">{{ item.title }}</text>
							</view>
						</view>
						<view class="flex align-center justify-between">
							<view class="text-red text-bold text-lg">
								<text class="text-price wanl-orange">{{ item.price }}</text>
							</view>

							<view class="text-sm wanl-gray" v-show="false">
								<text class="margin-right">{{$wanlshop.toFormat(item.comment, 'hundred')}} 评价</text>
								<text>{{ item.comment > 0 ? parseInt((item.praise / item.comment) * 100) : 0 }}%
									好评</text>
							</view>

						</view>
						<view v-if="shopnameType" class="f20 info tar flexshopNmae "
							@click.stop="$wanlshop.to('/pages/shop/index?id=' + item.shop_id)">
							<view class="shopnameBOx overflow_1 flex">
								<view class="flex1 overflow_1">
									{{ item.shopname }}
								</view>
								<view class="">
									<text class="c3d ml8"> 进店</text>
									<u-icon name="arrow-right" color="#3D3D3D"></u-icon>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>


		</view>
	</view>
</template>

<script>
	/**
	 * wanlProduct 商品
	 * @description 商品组件 深圳前海万联科技有限公司 https://www.wanlshop.com（除万联官方内嵌系统，未经授权严禁使用）
	 * @著作权：WanlShop 登记号：2020SR0255711 版本：V1.0.0
	 * @property {Array} dataList 列表数据
	 * @property {String} dataStyle 列表样式
	 * @example <wanl-product />
	 */
	export default {
		name: 'wanlProduct',

		props: {
			dataList: {
				type: Array,
				required: true,
				default: function() {
					return [];
				}
			},
			shopnameType: {
				type: Boolean,
				default: false
			},
			dataType: {
				type: String,
				default: 'goods'
			},
			dataStyle: {
				type: String,
				default: 'col-2-20'
			},
			// shopType0 关注店铺  shopType1推荐  2年终狂欢节 3秒送 4品牌 5新品 6 捡漏
			shopType: {
				type: String,
				default: '',
			},
			type: {
				type: Number,
				default: 0
			},
		},
		data() {
			return {
				localDataStyle: this.dataStyle, // 初始化
				heightStyle: '',
				addTime: 180,
				leftList: [],
				rightList: [],
				tempList: [],
				children: []
			}
		},
		watch: {
			dataStyle(newVal) {
				console.log(newVal);
				this.localDataStyle = newVal; // 父级更新时同步本地值
			},
			copyFlowList(nVal, oVal) {
				// 取差值，即这一次数组变化新增的部分
				let startIndex = Array.isArray(oVal) && oVal.length > 0 ? oVal.length : 0;
				if (nVal.slice(startIndex).length == 0) {
					this.leftList = [];
					this.rightList = [];
					this.tempList = this.cloneData(this.copyFlowList);
				} else {
					this.tempList = this.tempList.concat(this.cloneData(nVal.slice(startIndex)));
				}
				this.splitData();
			},
		},
		created() {
			// #ifdef MP-WEIXIN
			// this.heightStyle = `calc(100vh - ${this.$wanlshop.wanlsys().height}px - 120px)`
			// #endif
			let level = getApp().globalData.level

		},
		mounted() {

			let level = getApp().globalData.level
			this.tempList = this.cloneData(this.copyFlowList);
			this.splitData();
		},
		computed: {
			// 破坏flowList变量的引用，否则watch的结果新旧值是一样的
			copyFlowList() {
				return this.cloneData(this.dataList);
			}
		},
		methods: {
			async splitData() {

				let rightRect = await this.getRect('#wanl-right-cloumn');
				let leftRect = await this.getRect('#wanl-left-cloumn');
				console.log(this.tempList)
				if (!this.tempList.length) return;
				// 如果左边小于或等于右边，就添加到左边，否则添加到右边
				let item = this.tempList[0];
				if (!item) return;
				item.image = this.$wanlshop.oss(item.image, 172, 0, 1);
				item.comment = this.$wanlshop.toFormat(item.comment, 'hundred');
				item.praise = item.comment > 0 ? parseInt((item.praise / item.comment) * 100) : 0;
				if (leftRect.height < rightRect.height) {
					this.leftList.push(item);
				} else if (leftRect.height > rightRect.height) {
					this.rightList.push(item);
				} else {
					// 这里是为了保证第一和第二张添加时，左右都能有内容
					// 因为添加第一张，实际队列的高度可能还是0，这时需要根据队列元素长度判断下一个该放哪边
					if (this.leftList.length <= this.rightList.length) {
						this.leftList.push(item);
					} else {
						this.rightList.push(item);
					}
				}
				// 移除临时列表的第一项
				this.tempList.splice(0, 1);
				// 如果临时数组还有数据，继续循环
				if (this.tempList.length) {
					setTimeout(() => {
						this.splitData();
					}, this.addTime)
				}
			},
			// 复制而不是引用对象和数组
			cloneData(data) {
				return JSON.parse(JSON.stringify(data));
			},
			getRect(selector, all) {
				return new Promise(resolve => {
					let query = null;
					// 支付宝小程序不能加后面的.in(this)，是它自身的限制
					// #ifndef MP-ALIPAY
					query = uni.createSelectorQuery().in(this)
					// #endif
					// #ifdef MP-ALIPAY
					query = uni.createSelectorQuery()
					// #endif
					query[all ? 'selectAll' : 'select'](selector)
						.boundingClientRect(rect => {
							if (all && Array.isArray(rect) && rect.length) {
								resolve(rect)
							}
							if (!all && rect) {
								resolve(rect)
							}
						})
						.exec()
				})
			},
			handleGoods(id) {
				if (this.dataType === 'goods') {
					this.onGoods(id);
				} else if (this.dataType === 'groups') {
					this.$wanlshop.to(`/pages/apps/groups/goods?id=${id}`);
				}
			}
		}
	};
</script>

<style lang="scss" scoped>
	.flexshopNmae {
		display: flex;
	}

	.shopnameBOx {
		padding: 4rpx 24rpx;
		background: #eee;
		border-radius: 20rpx;
	}

	.wanl-product .product_list .content1 {
		height: 140rpx;
	}

	.wanl-product .product_list .content2 {
		height: 190rpx;
	}

	.img-wrap {
		width: 100%;
		height: 360rpx;
	}

	.wanl-product .product_warter.col-2-10 {
		margin: 0 !important;
	}

	/* #ifdef MP-WEIXIN */
	.wanl-product {
		// height: 1180rpx;

	}


	/* #endif */
	.forBox {
		display: flex;
		flex-wrap: wrap;
		flex-direction: row !important;
		justify-content: space-between;

		.warter {
			width: calc(50% - 10rpx);
			margin-bottom: 20rpx;
		}
	}

	.wanl-waterfall {
		display: flex;
		flex-direction: row;
		align-items: flex-start;

		.wanl-cloumn {
			display: flex;
			flex: 1;
			flex-direction: column;
			height: auto;
			width: 50%;

			.wanl-image {
				width: 100%;
			}
		}
	}

	.border-wrap {
		border-radius: 14rpx;
	}
</style>